<template>
	<view>

		<view class="bg_box">
			<!-- <image class="bg01" src="../../static/bg02.png"
				mode="widthFix">
			</image> -->
			<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
				<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
				<view class="text">加盟政策</view>
			</view>
			<view class="bg_content">
				<view class="left_content">
					<view class="left_auto">
						<block v-for="(item, index) in list" :key="'list'+index">
							<view class="list" :class="index == 0 ? 'pageStyle' : ''" :data-url="item.url" @click="gotopage">{{item.text}}</view>
						</block>
					</view>
				</view>
				<view class="right_content">
					
					<view class="title">{{data.title}}</view>
						<image  v-if="data.image" :src="data.image" ></image>
					<view class="content"  v-html="data.content"></view>
					<video v-if="data.video" :src="data.video" controls style="width: 100%;padding-bottom: 50rpx;"></video>
					<view class="goods" v-if="data.good" :data-url="'/pages/goods/goods?id=' + data.good.goods_id" @click.stop="gotopage">
						<image class="g_img" :src="data.good.image"></image>
						<view class="g_con">
							<view class="g_tit">{{data.good.name}}</view>
							<view class="g_price">￥{{data.good.price}}</view>
						</view>
					</view>
					
				</view>
					




			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrrol: false,
				select: 0,
				list:[
					{
						text:'加盟政策',
						url:'/pages/index/index'
					},
					{
						text:'团队加入',
						url:'/pages/index/team'
					},
					{
						text:'销售排行',
						url:'/pages/index/rank'
					},
					{
						text:'素材中心',
						url:'/pages/index/material'
					},
					{
						text:'活动中心',
						url:'/pages/index/events'
					},
					{
						text:'我的',
						url:'/pages/personal/personal'
					},
				],
				data:'',
				id:0,

			}
		},
		onLoad(e) {
			let me  = this;
			    me.id=e.id;
				me.Net._get('hd',{id:'33'},(res)=>{
					if(res.code ==1){
						//console.log(res.data)
						me.data=res.data

					}
				});

		},
		onShow() {
			let that = this;
			//that.loadData();
		},
		methods: {
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header .text{
		background-color: #4d726f;
		color: #fff;
	}

	.clear_box07 {
		height: 27vw;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		display: block;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 999;
		display: flex;
		padding-top: 4%;
	}
	
	
	.bg_box .bg_content .left_content{
		width: 24vw;
		margin-right: 3vw;
		position: relative;
		
	}
	
	.bg_box .bg_content .right_content{
		flex: 1;
		background-color: #fff;
		height: calc(100vh - 21.5vw);
		border-radius: 0 3vw 3vw 0;
		padding: 3vw;
		box-sizing: border-box;
		
	}
	
	.bg_box .bg_content .left_content .left_auto{
		width: 24vw;
		position: fixed;
		left: 4%;
		top: calc(17.5vw + var(--status-bar-height));
	}
	
	
	.bg_box .bg_content .left_content .list{
		width: 100%;
		height: 12vw;
		background-color: #fff;
		font-size: 3.5vw;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #fff;
		border-bottom: 1px solid #4d726f;
	}
	
	.bg_box .bg_content .left_content .list:nth-child(1){
		border-radius: 1vw 0 0 0;
	}
	
	.bg_box .bg_content .left_content .list:last-child{
		border-radius: 0 0 0 1vw;
		border-bottom: none;
	}
	
	.pageStyle{
		font-weight: bold;
		color: #fff !important;
		background-color: #4d726f !important;
	}
</style>